<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>

    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="https://code.highcharts.com.cn/highstock/8.2.2/modules/data.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>


    <script type="text/javascript">
        var link = '/fund/report/position/collection';
        // link = 'http://127.0.0.1:8003/fund/report/position/collection';
        var optionsValue = {
            chart: {
                type: 'packedbubble',
                height: '100%'
            },
            title: {
                text: '基金持仓额度'
            },
            tooltip: {
                useHTML: true,
                pointFormat: '<b>{point.name}:</b> {point.y:.2f}亿</sub>'
            },
            plotOptions: {
                packedbubble: {
                    minSize: '50%',
                    maxSize: '120%',
                    zMin: 0,
                    zMax: 1000,
                    layoutAlgorithm: {
                        gravitationalConstant: 0.05,
                        splitSeries: true,
                        seriesInteraction: false,
                        dragBetweenSeries: true,
                        parentNodeLimit: true
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        filter: {
                            property: 'y',
                            operator: '>',
                            value: 1
                        },
                        style: {
                            color: 'black',
                            textOutline: 'none',
                            fontWeight: 'normal'
                        }
                    }
                }
            },
            series: [{
                name: '上证',
                data: [{
                    name: 'Germany',
                    value: 767.1
                }]
            }, {
                name: '深证',
                data: [{
                    name: "Senegal",
                    value: 8.2
                }
                    ]
            }, {
                name: '创业板',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }, {
                name: '港股',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }, {
                name: '美股',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }]
        };

        var optionsNumber = {
            chart: {
                type: 'packedbubble',
                height: '100%'
            },
            title: {
                text: '持仓基金个数'
            },
            tooltip: {
                useHTML: true,
                pointFormat: '<b>{point.name}:</b> {point.y:.2f}个</sub>'
            },
            plotOptions: {
                packedbubble: {
                    minSize: '30%',
                    maxSize: '120%',
                    zMin: 0,
                    zMax: 1000,
                    layoutAlgorithm: {
                        splitSeries: true,
                        gravitationalConstant: 0.02
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                        filter: {
                            property: 'y',
                            operator: '>',
                            value: 1
                        },
                        style: {
                            color: 'black',
                            textOutline: 'none',
                            fontWeight: 'normal'
                        }
                    }
                }
            },
            series: [{
                name: '上证',
                data: [{
                    name: 'Germany',
                    value: 767.1
                }]
            }, {
                name: '深证',
                data: [{
                    name: "Senegal",
                    value: 8.2
                }
                ]
            }, {
                name: '创业板',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }, {
                name: '港股',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }, {
                name: '美股',
                data: [{
                    name: "Australia",
                    value: 409.4
                }]
            }]
        };

        function post() {
            getData();
        }

        function createChartValue(data) {
            var stockList = data.info;
            var shanghaiStock = [];
            var shenzhenStock = [];
            var chuangyebanStock = [];
            var hkStock = [];
            var usStock = [];


            if (stockList != null) {
                for (var i = 0; i < stockList.length; i++) {
                    var item = {};
                    item.name = stockList[i].name;
                    item.value = stockList[i].value / 100000000;
                    var code=stockList[i].code;
                    if(code==null){
                        continue;
                    }
                    if(code.length==5){
                        hkStock.push(item);
                    }else if (code.startsWith("6")) {
                        shanghaiStock.push(item);
                    } else if (code.startsWith("0")) {
                        shenzhenStock.push(item);
                    } else if (code.startsWith("3")) {
                        chuangyebanStock.push(item);
                    }else{
                        usStock.push(item)
                    }
                }
            }
            optionsValue.series[0].data = shanghaiStock;
            optionsValue.series[1].data = shenzhenStock;
            optionsValue.series[2].data = chuangyebanStock;
            optionsValue.series[3].data = hkStock;
            optionsValue.series[4].data = usStock;
            var chart = Highcharts.chart('containerValue', optionsValue);
        }

        function createChartNumber(data) {
            var stockList = data.info;
            var shanghaiStock = [];
            var shenzhenStock = [];
            var chuangyebanStock = [];
            var hkStock = [];
            var usStock = [];


            if (stockList != null) {
                for (var i = 0; i < stockList.length; i++) {
                    var item = {};
                    item.name = stockList[i].name;
                    item.value = stockList[i].number;
                    var code=stockList[i].code;
                    if(code==null){
                        continue;
                    }
                    if(code.length==5){
                        hkStock.push(item);
                    }else if (code.startsWith("6")) {
                        shanghaiStock.push(item);
                    } else if (code.startsWith("0")) {
                        shenzhenStock.push(item);
                    } else if (code.startsWith("3")) {
                        chuangyebanStock.push(item);
                    }else{
                        usStock.push(item)
                    }
                }
            }
            optionsNumber.series[0].data = shanghaiStock;
            optionsNumber.series[1].data = shenzhenStock;
            optionsNumber.series[2].data = chuangyebanStock;
            optionsNumber.series[3].data = hkStock;
            optionsNumber.series[4].data = usStock;
            var chart = Highcharts.chart('containerNumber', optionsNumber);
        }

        function getData() {
            var postData = $("#codes").val();
            $.post(link, postData, function (data) {
                createChartValue(data);
                createChartNumber(data);
            }, "json");
        }
    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">请输入基金代码，多个请换行</label>
                    <div class="control">
                        <textarea id="codes" name="codes" class="textarea" placeholder="基金代码" rows="10"
                                  value="002001"></textarea>
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
    <div class="container">
        <div id="containerValue"></div>
    </div>

    <div class="container">
        <div id="containerNumber"></div>
    </div>
<hr>

<style>
    /*#container {*/
    /*    min-width: 800px;*/
    /*    max-width: 1000px;*/
    /*    margin: 0 auto;*/
    /*}*/
</style>
</body>
</html>
